<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta_new" /}
</head>

<body class="F5">
<script>
        function sendTimeOut(oid){
            $.post("{:url('index/Team/clientOrderTimeOut','',false)}",{'id':oid},function(ret){
                console.log(ret);
            });
        }
           function startCountdown(element,seconds,oid) {
//                if (seconds == 0) {
//                    element.prev('div').text("已确认");
//                    element.prev('div').attr('class', 'btn');
//                    element.remove();
//                    return;
//                }
                const interval = setInterval(() => {
                    if (seconds <= 0) {
                        clearInterval(interval); // 停止倒计时
                        element.text('');
                        element.prev('div').text("已完成");
                        element.prev('div').attr('class', 'btn');
                        sendTimeOut(oid);
                        element.remove();
                    } else {
                        // 计算小时、分钟、秒
                        const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
                        const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
                        const secs = String(seconds % 60).padStart(2, '0');

                        // 更新 DOM 内容
                        element.text(`倒计时：${hours}:${minutes}:${secs}`);
                        seconds--;
                    }
                }, 1000); // 每秒更新一次
            }

</script>
<div id="app" class="tasklist-page">
    <!-- header -->
    <div class="header">
        <div class="header-height"></div>
        <div class="header-wrap">
            <div class="header-content">
                <div class="left">
                    <a href="{:url('index/user/index');}"><div class="go-back"><img src="/static/images/go-back.png" alt=""></div></a>
                    <div class="text">任务列表</div>
                </div>
                <div class="title"></div>
            </div>
        </div>
    </div>
    <div class="top-wrap">
        <div class="title">达人升级任务</div>
        <div class="progress-bar">
            <div class="progress" style="width: {$percent|default=0}%;"></div>
        </div>
        <div class="desc">当前完成进度{$complete}/{$total}</div>
    </div>
    <div class="list-wrap">
{foreach $list as $key=>$vo } 
        <div class="item">
            {switch vo.order_type}
                {case 1} <div class="tag">推荐人橱窗</div>{/case}
                {case 2}<div class="tag blue">公司橱窗</div>{/case}
                {case 3}<div class="tag orange">上级橱窗</div>{/case}
                {default /} 
            {/switch}
           
            
            <div class="row">
                <div class="rank">{$key+1|str_pad=###, 2, "0", STR_PAD_LEFT}</div>
                <div class="avatar">
                    {if $vo.avatar == ''}
                     <img src="/assets/img/avatar.png" alt="">
                    {else /}
                    <img src="{$vo['avatar']}" alt="">
                    {/if}
                    
                    
                </div>
                <div class="name-box">
                    <div class="nickname">{$vo['nickname']}</div>
                    <div class="phone">{$vo['mobile']|hidtelphone}</div>
                </div>
            </div>
            
            <div class="right-wrap">
                <div class="right-box">
                    {switch vo.status}
                        {case -2} 
                        <!--<div class="btn">已驳回</div>-->
                        <a href="{:url('index/task/placeOrder',['id'=>$vo['id'],'num'=>$key]);}" ><div class="btn " style="background-color: red">已驳回</div></a>
                        {/case}
                        {case -1} <div class="btn">已超时</div>{/case}
                        {case 0} <a href="{:url('index/task/placeOrder',['id'=>$vo['id'],'num'=>$key]);}" ><div class="btn blue">去补单</div></a>{/case}
                        {case 1} <div class="btn green">未确认</div>
                        <div id="expiretime_{$vo['id']}" class="time"></div>
                        <script> startCountdown($("#expiretime_{$vo['id']}"),"{$vo['expiretime']}","{$vo['id']}");</script>
                        {/case}
                        {case 2}
                        <a href="{:url('index/task/details',['id'=>$vo['id'],'num'=>$key]);}" >
                            <div class="btn">已完成</div>
                        </a>
                        {/case}
                        {default /} 
                    {/switch}
                    
                </div>
            </div>
            
        </div>
{/foreach}

    </div>
</div>
<script src="/static/js/common.js"></script>

</body>
</html>